<template>
  <div style="margin-top: 20px">
    <el-card class="box-card21">
      <div class="clearfix">
        <span style="font-size: 1.5em; font-weight: bold; margin-left: 10px">数控机床采购</span>
        <div style="float: right">
          <el-button type="primary" size="small">删除</el-button>
          <el-button type="primary" size="small">到货</el-button>
          <el-button type="danger" size="small" style="margin-left: 10px">导出</el-button>
          <el-button type="danger" size="small" style="margin-left: 10px">打印</el-button>
        </div>
      </div>
      <div class="status" style="float: right; margin-right: 20px">
        <svg-icon icon-class="daicai" style="width: 110px; height: 100px" />
      </div>
      <div style="margin-top: 40px">
        <div style="margin-left: 10px">{{ tablelist[0].createdBy }}</div>
        <div style="margin-top: 25px; margin-left: 10px">
          创建时间：{{ tablelist[0].creationTime }}
        </div>
      </div>
      <el-tabs style="margin-top: 50px">
        <el-tab-pane label="采购信息">
          <el-card>
            <div slot="header" class="clearfix">
              <span>基本信息</span>
            </div>
            <el-row :gutter="20" style="line-height: 3; margin-left: 90px; margin-right: -230px">
              <el-col :span="12">
                <div>采购单号：{{ tablelist[0].code }}</div>
                <div>采购日期：{{ tablelist[0].datePurchase }}</div>
                <div>采购人员：{{ tablelist[0].purchasingStaff }}</div>
                <div>联系方式：{{ tablelist[0].contact }}</div>
                <div>联系人：{{ tablelist[0].merchant }}</div>
                <div>期望到货日期：{{ tablelist[0].arrival }}</div>
                <div>备注：{{ tablelist[0].remark }}</div>
              </el-col>
              <el-col :span="12">
                <div>采购主题：{{ tablelist[0].procurementTopics }}</div>
                <div>关联采购申请：{{ tablelist[0].relevancy }}</div>
                <div>采购部门：{{ tablelist[0].department }}</div>
                <div>供应商：{{ tablelist[0].vendor }}</div>
                <div>联系方式：{{ tablelist[0].contact2 }}</div>
              </el-col>
            </el-row>
          </el-card>
          <!--关联文件-->
          <el-card style="margin-top: 20px">
            <div slot="header" class="clearfix">
              <span>关联文档</span>
              <el-button style="float: right" type="primary" size="small">批量下载</el-button>
            </div>
            <el-table :data="tableData2" style="width: 100%">
              <el-table-column type="selection" width="55" align="center"></el-table-column>
              <el-table-column prop="index" label="序号" width="55" align="center">
                <template #default="scope">
                  {{ scope.row.index }}
                </template>
              </el-table-column>
              <el-table-column prop="filename" label="文件名" align="center"></el-table-column>
              <el-table-column prop="uploadTime" label="上传时间" align="center"></el-table-column>
              <el-table-column prop="uploader" label="上传者" align="center"></el-table-column>
              <el-table-column prop="size" label="文档大小" align="center"></el-table-column>
              <el-table-column label="操作" width="80" align="center">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="downloadFile(scope.row.name)">下载</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <div style="height: 100px"></div>
        </el-tab-pane>
        <el-tab-pane label="设备明细">
          <el-card>
            <div slot="header" class="clearfix">
              <span>设备明细</span>
            </div>
            <div>
              <el-button style="margin-bottom: 10px">导出</el-button>
              <el-table :data="tableData" style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="序号" width="60" align="center">
                  <template v-slot="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="80" align="center">
                  <template #default="scope">
                    <el-link type="primary">{{
                      scope.row.index <= 2 ? "验收" : "加入档案" }}</el-link>
                  </template>
                </el-table-column>
                <el-table-column prop="state" label="状态" align="center"></el-table-column>
                <el-table-column prop="remark" label="已入帐数量" width="100" align="center"></el-table-column>
                <el-table-column prop="remark" label="待入帐数量" width="100" align="center"></el-table-column>
                <el-table-column prop="daohuo" label="已到货数量" width="100" align="center"></el-table-column>
                <el-table-column prop="weidaohuo" label="未到货数量" width="100" align="center"></el-table-column>
                <el-table-column prop="numbering" label="设备编号" align="center"></el-table-column>
                <el-table-column prop="name" label="设备名称" align="center"></el-table-column>
                <el-table-column prop="model" label="规格型号" align="center"></el-table-column>
                <el-table-column prop="type" label="设备类型" align="center"></el-table-column>
                <el-table-column prop="brand" label="品牌" align="center"></el-table-column>
                <el-table-column prop="quantity" label="采购数量" width="100" align="center"></el-table-column>
                <el-table-column prop="reference" label="参考单价" width="100" align="center"></el-table-column>
                <el-table-column prop="estimate" label="预计总金额" width="100" align="center"></el-table-column>
                <el-table-column prop="remark" label="备注" align="center"></el-table-column>
              </el-table>
              <div class="summary">
                总数量：<b>{{ totalQuantity }}</b> 总金额：<b style="color: red">{{ totalAmount.toFixed(2) }}</b>
              </div>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="到货验收">
          <el-card>
            <div slot="header" class="clearfix">
              <span>到货验收</span>
            </div>
            <div>
              <el-button style="margin-bottom: 10px">导出</el-button>
              <el-table :data="tableData32" style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="index" label="序号" width="60"></el-table-column>
                <el-table-column label="操作" width="80">
                  <template #default="scope">
                    <el-link type="primary" @click="handleView(scope.row)">查看</el-link>
                  </template>
                </el-table-column>
                <el-table-column prop="receiptNumber" label="验收单号"></el-table-column>
                <el-table-column prop="subject" label="验收主题"></el-table-column>
                <el-table-column prop="date" label="验收日期"></el-table-column>
                <el-table-column prop="department" label="验收部门"></el-table-column>
                <el-table-column prop="person" label="验收人员"></el-table-column>
                <el-table-column prop="contact" label="联系方式"></el-table-column>
                <el-table-column prop="remarks" label="备注"></el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="操作记录">
          <el-card>
            <div slot="header" class="clearfix">
              <span>操作记录</span>
            </div>
            <div>
              <el-button style="margin-bottom: 10px">导出</el-button>
              <el-table :data="tableData5" style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="index" label="序号" width="60"></el-table-column>
                <el-table-column prop="operator" label="操作人"></el-table-column>
                <el-table-column prop="time" label="操作时间"></el-table-column>
                <el-table-column prop="content" label="操作内容"></el-table-column>
              </el-table>
              <el-pagination background :current-page.sync="currentPage" :page-size="pageSize" :total="total"
                layout="prev, pager, next, sizes, total" :page-sizes="[10, 20, 30, 50]" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { SelectOrderAll } from "@/api/eastjet-maintenance/caig/cai"
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 45,
      tablelist: [],
      //到货验收
      tableData32: [

      ],
      //设备明细
      tableData: [

      ],
      //操作记录
      tableData5: [
        {
          index: 1,
          operator: "admin",
          time: "2026-06-07 20:00:00",
          content: "",
        },
        {
          index: 2,
          operator: "admin",
          time: "2026-06-07 20:00:00",
          content: "",
        },
        {
          index: 3,
          operator: "admin",
          time: "2026-06-07 20:00:00",
          content: "",
        },
        {
          index: 4,
          operator: "admin",
          time: "2026-06-07 20:00:00",
          content: "",
        },
        {
          index: 5,
          operator: "admin",
          time: "2026-06-07 20:00:00",
          content: "",
        },
      ],
      //关联文件
      tableData2: [],
    };
  },
  computed: {
    totalQuantity() {
      return this.tableData.reduce((sum, item) => sum + item.quantity, 0);
    },
    totalAmount() {
      return this.tableData.reduce((sum, item) => sum + item.estimate, 0);
    },
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      let map = { "code": this.$route.query.code, "username": this.$store.state.user.name, pan: "1" }
      SelectOrderAll(map).then((res) => {
        console.log("订单查看", res)
        this.tableData32 = res.data.data.list3
        this.tablelist = res.data.data.list
        this.tableData2 = res.data.data.documentations
        this.tableData = res.data.data.list2
        this.total = res.data.data.total
      })
    },
    handleSizeChange(size) {
      this.pageSize = size;
      listEquipment("", this.currentPage, this.pageSize).then((res) => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      });
      console.log(`每页 ${size} 条`);
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      listEquipment("", this.currentPage, this.pageSize).then((res) => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      });
      console.log(`当前页: ${page}`);
    },
  },
};
</script>

<style scoped>
.box-card21 {
  width: 1254px;
  /* height: 4010px; */
  margin-left: 30px;
}

.summary {
  margin-top: 10px;
  text-align: right;
}
</style>
